<template>
  <div class="min-h-screen bg-gray-50 text-gray-800">
    <!-- 主容器 -->
    <div class="flex flex-col md:flex-row min-h-screen">
      <!-- 左侧欢迎区域 (PC端显示) -->
      <div
        class="hidden md:flex flex-col justify-center items-center bg-gradient-custom bg-gradient-animated text-white p-12 w-full md:w-1/2"
      >
        <div class="max-w-lg w-full">
          <!-- Logo -->
          <div class="flex items-center space-x-2 mb-12">
            <span class="text-white text-3xl"
              ><i class="fa fa-comments-o"></i
            ></span>
            <span class="text-2xl font-bold text-white text-shadow">查聊</span>
          </div>

          <!-- 欢迎文字 -->
          <h1
            class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6 text-shadow"
          >
            加入查聊<br />开启交流之旅
          </h1>
          <p
            class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 max-w-md"
          >
            与志同道合的朋友分享知识、讨论问题、交流经验，一起成长进步
          </p>

          <!-- 装饰图标 -->
          <div class="flex justify-center mt-8">
            <div class="grid grid-cols-2 gap-6 animate-float">
              <div
                class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl"
              >
                <i class="fa fa-users"></i>
              </div>
              <div
                class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl"
              >
                <i class="fa fa-lightbulb-o"></i>
              </div>
              <div
                class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl"
              >
                <i class="fa fa-comments"></i>
              </div>
              <div
                class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center text-white text-xl"
              >
                <i class="fa fa-book"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧注册表单区域 -->
      <div class="flex-1 flex flex-col justify-center items-center p-6">
        <!-- 移动端Logo -->
        <div class="md:hidden flex items-center space-x-2 mb-10">
          <span class="text-primary text-2xl"
            ><i class="fa fa-comments-o"></i
          ></span>
          <span class="text-xl font-bold text-primary">查聊</span>
        </div>

        <!-- 注册表单容器 -->
        <div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
          <!-- 表单标题 -->
          <div class="mb-8 text-center">
            <h2 class="text-2xl font-bold text-gray-900 mb-2">创建账号</h2>
            <p class="text-gray-500">加入查聊社区，开始你的交流之旅</p>
          </div>

          <!-- 注册表单 -->
          <form
            id="register-form"
            class="space-y-6"
            @submit.prevent="handleRegister"
          >
            <!-- 用户名输入框 -->
            <div>
              <label
                for="username"
                class="block text-sm font-medium text-gray-700 mb-1"
                >用户名</label
              >
              <div class="relative">
                <span
                  class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"
                >
                  <i class="fa fa-user-o"></i>
                </span>
                <input
                  type="text"
                  id="username"
                  v-model="username"
                  placeholder="请设置用户名"
                  class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus"
                />
              </div>
              <p class="mt-1 text-xs text-gray-500">
                2-20个字符，可使用字母、数字和下划线
              </p>
            </div>

            <!-- 邮箱输入框 -->
            <div>
              <label
                for="email"
                class="block text-sm font-medium text-gray-700 mb-1"
                >邮箱</label
              >
              <div class="relative">
                <span
                  class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"
                >
                  <i class="fa fa-envelope-o"></i>
                </span>
                <input
                  type="email"
                  id="email"
                  v-model="email"
                  placeholder="请输入邮箱地址"
                  class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus"
                />
              </div>
              <p class="mt-1 text-xs text-gray-500">用于账号登录和找回密码</p>
            </div>

            <!-- 密码输入框 -->
            <div>
              <label
                for="password"
                class="block text-sm font-medium text-gray-700 mb-1"
                >密码</label
              >
              <div class="relative">
                <span
                  class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"
                >
                  <i class="fa fa-lock"></i>
                </span>
                <input
                  :type="showPassword ? 'text' : 'password'"
                  id="password"
                  v-model="password"
                  placeholder="请设置密码"
                  class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus"
                />
                <button
                  type="button"
                  class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700"
                  @click="togglePasswordVisibility"
                >
                  <i
                    :class="showPassword ? 'fa fa-eye' : 'fa fa-eye-slash'"
                  ></i>
                </button>
              </div>
              <div class="mt-2">
                <div class="flex items-center space-x-2 text-xs text-gray-500">
                  <div class="flex items-center">
                    <i
                      class="fa fa-check-circle text-green-500"
                      :class="
                        passwordStrength.length >= 8
                          ? 'opacity-100'
                          : 'opacity-50'
                      "
                    ></i>
                    <span class="ml-1">8位以上</span>
                  </div>
                  <div class="flex items-center">
                    <i
                      class="fa fa-check-circle text-green-500"
                      :class="
                        /[A-Z]/.test(password) ? 'opacity-100' : 'opacity-50'
                      "
                    ></i>
                    <span class="ml-1">包含大写字母</span>
                  </div>
                </div>
                <div
                  class="flex items-center space-x-2 text-xs text-gray-500 mt-1"
                >
                  <div class="flex items-center">
                    <i
                      class="fa fa-check-circle text-green-500"
                      :class="
                        /[0-9]/.test(password) ? 'opacity-100' : 'opacity-50'
                      "
                    ></i>
                    <span class="ml-1">包含数字</span>
                  </div>
                  <div class="flex items-center">
                    <i
                      class="fa fa-check-circle text-green-500"
                      :class="
                        /[^A-Za-z0-9]/.test(password)
                          ? 'opacity-100'
                          : 'opacity-50'
                      "
                    ></i>
                    <span class="ml-1">包含特殊字符</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 确认密码输入框 -->
            <div>
              <label
                for="confirm-password"
                class="block text-sm font-medium text-gray-700 mb-1"
                >确认密码</label
              >
              <div class="relative">
                <span
                  class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"
                >
                  <i class="fa fa-lock"></i>
                </span>
                <input
                  :type="showConfirmPassword ? 'text' : 'password'"
                  id="confirm-password"
                  v-model="confirmPassword"
                  placeholder="请再次输入密码"
                  class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg outline-none input-focus"
                />
                <button
                  type="button"
                  class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700"
                  @click="toggleConfirmPasswordVisibility"
                >
                  <i
                    :class="
                      showConfirmPassword ? 'fa fa-eye' : 'fa fa-eye-slash'
                    "
                  ></i>
                </button>
              </div>
              <p
                v-if="confirmPassword && confirmPassword !== password"
                class="mt-1 text-xs text-red-500"
              >
                两次输入的密码不一致
              </p>
            </div>

            <!-- 同意协议 -->
            <div class="flex items-start">
              <input
                type="checkbox"
                id="agree-terms"
                v-model="agreeTerms"
                class="mt-1 w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary/30"
              />
              <label for="agree-terms" class="ml-2 text-sm text-gray-600">
                我已阅读并同意
                <a href="#" class="text-primary hover:underline">服务条款</a> 和
                <a href="#" class="text-primary hover:underline">隐私政策</a>
              </label>
            </div>

            <!-- 注册按钮 -->
            <button
              type="submit"
              class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors"
              @click="handleRegister"
            >
              {{ isLoading ? "注册中..." : "注册账号" }}
            </button>

            <!-- 分隔线 -->
            <div class="flex items-center my-6">
              <div class="flex-1 border-t border-gray-200"></div>
              <span class="mx-4 text-sm text-gray-500">或使用以下方式登录</span>
              <div class="flex-1 border-t border-gray-200"></div>
            </div>

            <!-- 第三方登录选项 -->
            <div class="grid grid-cols-3 gap-3">
              <button
                type="button"
                class="flex items-center justify-center p-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
              >
                <i class="fa fa-weibo text-red-500"></i>
              </button>
              <button
                type="button"
                class="flex items-center justify-center p-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
              >
                <i class="fa fa-wechat text-green-600"></i>
              </button>
              <button
                type="button"
                class="flex items-center justify-center p-3 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
              >
                <i class="fa fa-github"></i>
              </button>
            </div>
          </form>

          <!-- 登录账号链接 -->
          <div class="mt-8 text-center">
            <p class="text-gray-600">
              已有账号？
              <a
                href="/login"
                class="font-medium text-primary hover:text-primary/80 transition-colors"
                >立即登录</a
              >
            </p>
          </div>
        </div>

        <!-- 底部版权信息 -->
        <div class="mt-10 text-center text-gray-500 text-sm">
          <p>© 2023 查聊. 保留所有权利.</p>
          <div class="mt-2 space-x-4">
            <a href="#" class="hover:text-gray-700 transition-colors"
              >服务条款</a
            >
            <a href="#" class="hover:text-gray-700 transition-colors"
              >隐私政策</a
            >
            <a href="#" class="hover:text-gray-700 transition-colors"
              >帮助中心</a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 注册成功弹窗 -->
    <div
      id="success-modal"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      v-show="showSuccessModal"
    >
      <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
        <div
          class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"
        >
          <i class="fa fa-check text-2xl text-green-500"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">
          注册成功
        </h3>
        <p class="text-gray-600 mb-6 text-center">
          您的账号已创建成功，现在可以登录了
        </p>
        <button
          class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
          @click="closeSuccessModal"
        >
          去登录
        </button>
      </div>
    </div>

    <!-- 错误提示弹窗 -->
    <div
      id="error-modal"
      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
      v-show="showErrorModal"
    >
      <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
        <div
          class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"
        >
          <i class="fa fa-times text-2xl text-red-500"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">
          注册失败
        </h3>
        <p id="error-message" class="text-gray-600 mb-6 text-center">
          {{ errorMessage }}
        </p>
        <button
          id="close-error-btn"
          class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
          @click="closeErrorModal"
        >
          重试
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import { useRouter } from "vue-router"
import { register } from "../services/userService"

// 表单状态
const username = ref("")
const email = ref("")
const password = ref("")
const confirmPassword = ref("")
const agreeTerms = ref(false)
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const isLoading = ref(false)
const showSuccessModal = ref(false)
const showErrorModal = ref(false)
const errorMessage = ref("注册失败，请稍后再试")

const router = useRouter()

// 表单验证状态
const isFormValid = computed(() => {
  return (
    username.value.trim().length >= 2 &&
    username.value.trim().length <= 20 &&
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim()) &&
    password.value.length >= 8 &&
    /[A-Z]/.test(password.value) &&
    /[0-9]/.test(password.value) &&
    /[^A-Za-z0-9]/.test(password.value) &&
    password.value === confirmPassword.value &&
    agreeTerms.value
  )
})

// 计算密码强度
const passwordStrength = computed(() => password.value)

// 方法
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value
}

const handleRegister = async () => {
  console.log("表单提交，handleRegister 函数被调用")

  // if (!isFormValid.value) {
  //   showError("请检查表单信息是否完整并符合要求")
  //   return
  // }

  isLoading.value = true

  try {
    // 调用注册API
    const result = await register({
      loginId: username.value.trim(),
      password: password.value,
      nickname: username.value.trim(),  
      avatar: "http://example.com/avatar.jpg",
      intro: "这个人很懒，没留下什么",
    })

    console.log("注册成功，返回结果:", result)

    // 注册成功
    showSuccessModal.value = true
  } catch (error) {
    console.error("注册失败:", error)
    showError(error instanceof Error ? error.message : "注册失败，请稍后再试")
  } finally {
    isLoading.value = false
  }
}

const showError = (message: string) => {
  errorMessage.value = message
  showErrorModal.value = true
}

const closeSuccessModal = () => {
  showSuccessModal.value = false
  // 成功后跳转到登录页面
  router.push("/login")
}

const closeErrorModal = () => {
  showErrorModal.value = false
}
</script>

<style scoped>
/* 自定义工具类 */
.bg-gradient-custom {
  background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-focus {
  transition: all;
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.3);
    border-color: var(--primary-color);
  }
}

/* 动画效果 */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 渐变背景动画 */
.bg-gradient-animated {
  background-size: 200% 200%;
  animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
